<template>
  <div class="IconsDialog">
    <el-button style="padding: 4px" size="large" @click="open">


      <span v-if="selectedIcon">
        <ApproveIconImage
            style="border-radius: 6px;height: 30px"
            :id="selectedIcon"
            class="icon-item"
        />
      </span>
      <span v-else>请选择</span>
    </el-button>
    <el-dialog
        title="选择图标"
        v-model="dialogVisible"
        width="612px">
      <div class="content">
        <ApproveIconImage
            v-for="(icon, index) in iconList"
            :key="index" :id="icon.id"
            class="icon-item"
            :class="{active: selectedIcon === icon.id}"
            @click="selectedIcon = icon.id"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel" size="small">取 消</el-button>
        <el-button type="primary" @click="confirm"
                   size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script setup name="IconsDialog">
import ApproveIconImage from "@/views/flow/createDirectly/basicSetting/ApproveIconImage.vue";
const props = defineProps({
  modelValue: {
    type: [String,
      Number],
    default: 0
  }
})
const emit = defineEmits(['update:modelValue'])
const dialogVisible = ref(false)
const iconList = ref(
    Object.entries(import.meta.glob('./approverIcon/*.png',
        {eager: true}))
        .sort((a,
               b) => {
          return Number(a[0].match(new RegExp(/\d+/,'ig')) - b[0].match(new RegExp(/\d+/,'ig')))
        })
        .map(([path, module],
              idx) => ({
          src: module.default,
          id: idx,
        }))
)
const open = () => {
  dialogVisible.value = true
}
const cancel = () => {
  dialogVisible.value = false
  //selectedIcon.value = activeIcon
}
const selectedIcon = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    activeIcon.value = val
    emit('update:modelValue',
        val)
  }
})
const activeIcon = ref(iconList.value[0].id)
const confirm = () => {
  dialogVisible.value = false;
  activeIcon.value = selectedIcon.value
}
</script>
<style scoped lang="scss">
.IconsDialog {

  .content {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;

    .icon-item {
      flex: 0 0 40px;
      height: 40px;
      cursor: pointer;
      border-radius: 4px;
      opacity: .3;
    }

    .active {
      opacity: 1;
    }
  }

  .dialog-footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
}
</style>
